import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { UploadAdapter } from '../UploadAdapter' //用来做上传图片到服务器的拦截器的
import { PageModelService } from 'src/app/service/page-model.service';

import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';
import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'; //编辑器js文件生成的类的名字

@Component({
  selector: 's-ckeditor-root',
  templateUrl: './s-ckeditor.component.html',
  styleUrls: ['./s-ckeditor.component.scss']
})
export class SCkeditorComponent implements OnInit {
  Editor = DecoupledEditor;
  config = {
    toolbar: [
      'heading',
      '|',
      'fontfamily',
      'fontsize',
      'alignment',
      'highlight',
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'imageUpload',
      '|',
      'undo',
      'redo'
    ],
    language: 'zh-cn',
    fontSize: {
      options: [12, 14, 16, 20, 26, 32, 36, 40, 44, 48, 64, 96, 128]
    },
    highlight: {
      options: [{
        model: 'yellowMarker',
        class: 'pen-yellow',
        title: '黄',
        color: 'var(--ck-highlight-marker-yellow)',
        type: 'pen'
      },
      {
        model: 'greenMarker',
        class: 'pen-green',
        title: '绿',
        color: 'var(--ck-highlight-marker-green)',
        type: 'pen'
      },
      {
        model: 'pinkMarker',
        class: 'pen-pink',
        title: '粉',
        color: 'var(--ck-highlight-marker-pink)',
        type: 'pen'
      },
      {
        model: 'blueMarker',
        class: 'pen-blue',
        title: '蓝',
        color: 'var(--ck-highlight-marker-blue)',
        type: 'pen'
      },
      {
        model: 'redPen',
        class: 'pen-red',
        title: '红',
        color: 'var(--ck-highlight-pen-red)',
        type: 'pen'
      },
      {
        model: 'orange',
        class: 'pen-orange',
        title: '橙',
        color: '#faad14',
        type: 'pen'
      },
      {
        model: 'gray9',
        class: 'pen-999',
        title: '灰色9',
        color: '#999',
        type: 'pen'
      },
      {
        model: 'gray6',
        class: 'pen-666',
        title: '灰色6',
        color: '#666',
        type: 'pen'
      },
      {
        model: 'black3',
        class: 'pen-333',
        title: '黑色3',
        color: '#333',
        type: 'pen'
      }]
    }
  };
  model = {
    editorData: ''
  };

  @Input() inputData = '';
  @Output() outputData = new EventEmitter<string>();

  constructor(
    private pageModelService: PageModelService
  ) { }

  ngOnInit() {
    this.model.editorData = this.inputData;
  }

  //初始化加载
  onReady(editor) {
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement(),
    )
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new UploadAdapter(loader,this.pageModelService);
    };
  }
  //内容变化时
  onChange() {
    this.outputData.emit(this.model.editorData);
  }
}

